<template>
	<view>
		<!-- <view v-show="isShow">
			<progress :percent="percent" stroke-width="10"></progress>
		</view> -->
		<view>
			<button type="primary" :loading="loading" :disabled="disabled" @click="getAuthTip"
				:class="{ active : active }"
				:style="{'height':height,'line-height':lineheight,'border-radius':borderRadius}">
				<image class="headimg-img" :src="src" :style="{'height':height,'width':width}"></image>
			</button>
		</view>

		<!-- 告知权限申请的使用目的 -->
		<uni-popup ref="tip" type="dialog">
			<uni-popup-dialog mode="input" message="成功消息" :duration="2000" :before-close="true" @close="close();"
				@confirm="confirm()" title="权限说明" confirmText="禁止" cancelText="允许">
				对存储空间/照片/相机/摄像头权限申请说明：便于您使用该功能上传您的照片/图片/视频及用于更换头像、保存相册、发布动态/分享等场景中读取和写入相册和文件内容。
			</uni-popup-dialog>
		</uni-popup>
	</view>

</template>
<script>
	import {
		mapState
	} from 'vuex';
	var _self;
	export default {
		data() {
			return {
				isShow: false,
				percent: 0,
				loading: false,
				disabled: false,
				active: false,
			}
		},
		props: ['src', 'width', 'height', 'lineheight', 'borderRadius'],
		created() {

		},
		computed: {
			...mapState(['hasLogin']),
		},
		methods: {
			getAuthTip() {
				if (!this.hasLogin) {
					this.$api.msg('请先登录！', 'none');
					setTimeout(() => {
						uni.navigateTo({
							url: '/pages/login/login',
						})
					}, 1000)
					return false;
				}

				this.$refs.tip.open();

			},

			close() {
				this.$refs.tip.close();
			},

			confirm() {
				this.$refs.tip.close();
				this.upload();
			},

			upload: function() {
				this.isShow = true;
				this.active = true;
				let token = uni.getStorageSync('token');

				_self = this;
				uni.chooseImage({
					count: 1,
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					// sourceType: ['album'], //从相册选择
					success: function(res) {
						const tempFilePaths = res.tempFilePaths;
						const uploadTask = uni.uploadFile({
							url: 'https://test.hnliandesy.com/api/upload',
							filePath: tempFilePaths[0],
							name: 'file',
							formData: {

							},
							success: function(uploadFileRes) {

								if (uploadFileRes.data) {
									let uploadType = uni.getStorageSync('uploadType')
									let data = JSON.parse(uploadFileRes.data);

									if (data.status == 0) {
										_self.$api.msg(data.msg);
										return false;
									}

									switch (uploadType) {
										case 'headimg':
											uni.$emit('changeHeadimg', uploadFileRes.data);
											break;
										case 'logo':
											uni.$emit('changeLogo', uploadFileRes.data);
											break;
										case 'license':
											uni.$emit('changeLicense', uploadFileRes.data);
											break;
										case 'cover':
											uni.$emit('changeCover', uploadFileRes.data);
											break;
									}

									uni.$emit('changeStatus');
								}
							}
						});

						uploadTask.onProgressUpdate(function(res) {
							_self.percent = res.progress;
							// this.$api.msg('上传进度为 '.this.percent)
						});
					},
					error: function(e) {
						console.log(e);
					}
				});
			}
		},
		onLoad: function() {

		}
	}
</script>

<style scoped>
	uni-button[type=primary] {
		color: #fff;
		background-color: #fff;
		height: 170rpx;
	}

	.headimg-img {
		// #ifdef H5
		margin-left: -28rpx;
		// #endif

		// #ifdef APP-PLUS
		margin-left: -30rpx;
		// #endif

		// #ifdef MP-WEIXIN
		margin-left: 0;
		// #endif
	}

	button {
		// #ifdef MP-WEIXIN
		padding-left: 0;
		padding-right: 0;
		// #endif
		background-color: #FFFFFF;
	}
</style>